<template>
  <nav class="navbar navbar-custom">
    <div class="container-fluid">
      <div class="navbar-header page-scroll">
        <a class="navbar-brand" href="/">乘风 博客</a>
      </div>
      <div id="huxblog-navbar">
        <div class="navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="/">All Posts</a>
            </li>
            <li>
              <a href="/categories/books/">books</a>
            </li>
            <li>
              <a href="/categories/open-source/">open-source</a>
            </li>
            <li>
              <a href="/categories/presentations/">presentations</a>
            </li>
            <li>
              <a href="/categories/tech/">tech</a>
            </li>
            <li><a href="/reading//">READING</a></li>
            <li><a href="/travel//">TRAVEL</a></li>
            <li><a href="/notes//">NOTES</a></li>
            <li><a href="/archive//">ARCHIVE</a></li>
            <li><a href="/about//">ABOUT</a></li>
            <li>
              <a href="/search"><i class="fa fa-search"></i></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  <header class="intro-header">
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="site-heading">
            <h1>乘风博客</h1>
            <span class="subheading"></span>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div class="container"></div>
  <footer></footer>
</template>

<script setup>
  console.log('首页');
</script>

<style lang="less" scoped>
  h1 {
    margin-bottom: 10px;
    font-size: 80px;
    font-weight: 700;
    line-height: 1.1;
  }

  .intro-header {
    display: block;
    box-sizing: border-box;
    margin-bottom: 20px;
    overflow: hidden;
    background: no-repeat center center;
    background-attachment: scroll;
    background-color: #a3a3a3;
    background-image: url('/src/assets/images/background.webp');
    background-size: cover;
    color: #404040;
    font-size: 17px;
    line-height: 1.7;
    text-size-adjust: 100%; // 移动设备文本大小
    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
  }

  .container {
    box-sizing: border-box;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    color: #404040;
    font-family: -apple-system, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', STHeiti,
      'Microsoft YaHei', 'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
      'Source Han Sans CN', 'Noto Sans SC', 'Source Han Sans TC', 'Noto Sans CJK TC',
      'WenQuanYi Micro Hei', SimSun, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
  }

  .row {
    box-sizing: border-box;
    margin-right: -15px;
    margin-left: -15px;
    color: #404040;
    font-family: -apple-system, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', STHeiti,
      'Microsoft YaHei', 'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
      'Source Han Sans CN', 'Noto Sans SC', 'Source Han Sans TC', 'Noto Sans CJK TC',
      'WenQuanYi Micro Hei', SimSun, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
  }

  .col {
    position: relative;
    box-sizing: border-box;
    width: 66%;
    min-height: 1px;
    margin-left: 16%;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
    color: #404040;
    font-family: -apple-system, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', STHeiti,
      'Microsoft YaHei', 'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
      'Source Han Sans CN', 'Noto Sans SC', 'Source Han Sans TC', 'Noto Sans CJK TC',
      'WenQuanYi Micro Hei', SimSun, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
  }

  .site-heading {
    box-sizing: border-box;
    padding: 150px 0;
    color: #fff;
    font-size: 17px;
    line-height: 1.7;
    text-align: center;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
  }

  .subheading {
    display: block;
    box-sizing: border-box;
    margin: 10px 0 0;
    color: #fff;
    font-family: -apple-system, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', STHeiti,
      'Microsoft YaHei', 'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
      'Source Han Sans CN', 'Noto Sans SC', 'Source Han Sans TC', 'Noto Sans CJK TC',
      'WenQuanYi Micro Hei', SimSun, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.1;
    text-align: center;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
  }

  .navbar {
    display: block;
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    margin-bottom: 20px;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    transition: background-color 0.3s;
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: 0 0;
    color: #404040;
    font-size: 17px;
    line-height: 1.7;
  }

  .container-fluid {
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    color: #404040;
    font-size: 17px;
    line-height: 1.7;
  }

  .navbar-header {
    box-sizing: border-box;
    margin-right: 0;
    margin-left: 0;
    float: left;
    color: #404040;
    font-size: 17px;
    line-height: 1.7;
  }

  #huxblog-navbar {
    box-sizing: border-box;
    color: #404040;
    font-size: 17px;
    line-height: 1.7;
  }

  .navbar-collapse {
    box-sizing: border-box;
    width: auto;
    max-height: 340px;
    padding-right: 0;
    padding-left: 0;
    overflow-x: visible;
    border-top: 0;
    border-color: #e7e7e7;
    box-shadow: none;
    color: #404040;
    font-size: 17px;
    line-height: 1.7;
  }

  .nav {
    box-sizing: border-box;
    margin: 0;
    margin-right: -15px;
    padding-left: 0;
    float: right !important;
    color: #404040;
    font-size: 17px;
    line-height: 1.7;
    list-style: none;
  }

  .navbar-custom .navbar-brand {
    box-sizing: border-box;
    height: 56px;
    margin-left: -15px;
    padding: 20px;
    float: left;
    background-color: transparent;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 20px;
    text-decoration: none;
  }

  .navbar-custom .nav li a {
    padding: 20px;
    color: #fff;
  }

  .navbar-nav > li {
    display: block;
    position: relative;
    float: left;
  }
</style>
